<template>
  <div id="" class="pt10">
    <div class="searchDiv">
      <search-box class="houselist-search"
      :communityName='keyword'
      @searchKey="searchKey"
      @searchEvent="searchEvent"></search-box>
    </div>
    <!--搜索列表  -->
    <ul class="searchList">
      <li v-for="(item,index) in searchArr" :key="item.key"
      @click="searchList(item.keyword)">
        {{item.keyword}}
      </li>
    </ul>
    <!-- 无搜索记录提示 -->
    <div class="noSearch" v-show="noneHouse">
      <img src="@/assets/images/attention@2x.png" alt="" width="10%">
      <p>找不到相关房源</p>
    </div>

    <!-- 历史记录列表 -->
    <div class="listorySearch">
      <p>历史搜索记录</p>
      <ul class="searchList">
        <li v-for="(item,index) in localStorageArr" :key="item.key"
        @click="searchList(item.keyword)">
          <span>{{item.keyword}}</span>
          <img src="@/assets/images/wrong@2x.png" width="15" alt="">
        </li>
      </ul>
      <div class="clearHistory" @click="clearSearchHistory">
        清空历史记录
      </div>
    </div>

  </div>
</template>

<script src="./searchPage.js"></script>
<style lang="scss" scoped src="./searchPage.scss"></style>
